<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JRender Plus</title>
    <!-- import CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/element-plus/dist/index.css"
    />
    <!-- import JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-plus"></script>
    <script src="https://cdn.jsdelivr.net/npm/@jrender-plus/core"></script>
    <script src="https://cdn.jsdelivr.net/npm/@jrender-plus/element-plus"></script>
    <script src="https://cdn.jsdelivr.net/npm/@jrender-plus/extends"></script>
  </head>
  <body>
    <noscript id="model-data">
      <%- model %>
    </noscript>
    <div id="app">
      <j-render
        :fields="configs.fields"
        :data-source="configs.datasource"
        :listeners="configs.listeners"
      />
    </div>
    <script type="module">
      JRenderPlus.useGlobalRender(JRenderPlusExtends)
      JRenderPlus.useGlobalRender(JRenderPlusElement)

      const app = Vue.createApp({
        setup() {
          return {
            configs: Object.assign(
              { fields: [], datasource: {}, listeners: [] },
              JSON.parse(document.getElementById('model-data').innerHTML)
            )
          }
        }
      })

      app.use(ElementPlus, { size: "small" })
      app.use(JRenderPlus.default)
      app.mount("#app")
    </script>
  </body>
</html>
